<template>
  <div class="border-1 border-solid border-#e4e4e4 p-2">
    <div class="flex">
      <div class="pos-relative w-35">
        <div class="font-size-3">{{ title }}</div>
        <div class="progress-content">
          <el-progress type="circle" :percentage="percentage" />
        </div>
      </div>
      <el-scrollbar class="progress-bar">
        <div v-for="(item, index) in datas" :key="'file-item' + index">
          <!-- <el-tooltip placement="top" :content="item.algorithmName" effect="light"> -->
          <div class="label">
            <span v-if="item.log" class="error-btn">
              <el-icon><CircleClose /></el-icon>
            </span>
            {{ item.algorithmName }}
          </div>
          <!-- </el-tooltip> -->
          <el-progress :percentage="item.percentage" :format="format" :indeterminate="item.indeterminate" :status="item.status" />
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup name="progressBlock" lang="ts">
interface progressType {
  algorithmName: string;
  percentage: number;
  id: string | number;
  indeterminate: boolean;
  orderNumber: number;
  step: number;
  log: string;
  status: string;
}
const prop = defineProps({
  title: {
    type: String,
    default: '第一步：载荷数据检查'
  },
  percentage: {
    type: Number,
    default: 50
  },
  datas: {
    type: Array<progressType>,
    default: () => []
  }
});
const format = (percentage) => (percentage === 100 ? `${percentage}%` : '');
</script>

<style lang="scss" scoped>
.progress-content {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  padding-right: 8px;
  border-right: 1px solid #e4e4e4;
}
.label {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  margin-top: 4px;
}
.progress-bar {
  height: 250px;
  margin-left: 8px;
  width: calc(100% - 140px);
}
.error-btn {
  cursor: pointer;
  color: #f56c6c;
}
</style>
